<template>
  <div class="detailContainer">
      <!--固定标题栏-->
      <div class="fixTitle" v-if="showFixedTitle">
        <i class="iconfont icon-shouye" style="margin-right: 10px"></i>
        <h1>{{title}}</h1>
        <span class="columnLine"></span>
        <div class="fixTitleRight">
          <i class="iconfont icon-dianzan"></i>
          <span>{{praise}}</span>
          <i class="iconfont icon-pinglun"></i>
          <span>{{reply}}</span>
        </div>
      </div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/discuss' }">讨论区</el-breadcrumb-item>
      <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="contentBox">
      <div class="toolBar">
        <div class="item" @click="collect">
          <i v-if="!isCollect" class="iconfont icon-jushoucang"></i>
          <i v-else class="iconfont icon-hongxin"></i>
          <span>收藏</span>
        </div>
        <div class="item" @click="toChat">
          <i class="iconfont icon-liaotian"></i>
          <span>交流</span>
        </div>
      </div>
      <!--左侧区域-->
      <div class="leftContent">
        <!--头部区域-->
        <div class="head">
          <div class="title">
            <i class="iconfont icon-shouye"></i>
            <span class="passageTitle">{{title}}</span>
          </div>
          <div class="passageInfo">
            <img :src="avatarUrl?avatarUrl: this.sex ===1 ? '../../static/defaultAvatar1.jpeg': '../../static/defaultAvatar2.jpeg'" alt="">
            <div class="timeInfo">
              <a href="">{{userName}}</a>
              <span class="detailTime">编辑于 {{updateTime}}</span>
            </div>
            <div class="headFooter">
              回复 {{reply}}
              <span class="columnLine">|</span>
              赞 {{praise}}
              <span class="columnLine">|</span>
              浏览 {{pass}}
            </div>
          </div>
        </div>
        <!--正文内容-->
        <div class="passageContent" v-html="passageContent">
        </div>
        <!--正文底部点赞回复按钮区域-->
        <div class="passageFooter">
          <el-button @click="praiseClick" :class="{buttonClicked: isPraise === true}">
            <span><i class="iconfont icon-dianzan1"></i>({{praise}})</span>
          </el-button>
          <el-button>
            <span><i class="iconfont icon-huifu"></i>({{reply}})</span>
            </el-button>
        </div>
        <!--评论区域-->
        <div class="comment">
          <!--评论头部-->
          <div class="commentHead">
            <i class="iconfont icon-checkbox-full"></i>
            <span>{{this.total}}条回帖</span>
            <el-button><a href="#editReply">
            <i class="iconfont icon-yihuifu"></i>回帖</a></el-button>
          </div>
          <!--具体评论-->
          <div class="commentItem" v-for="(item,index) in
          commentList" :key="item.id" :class="{itemBorder:index!==commentList.length-1}">
            <img :src="item.avatarUrl?item.avatarUrl: item.sex ===1 ? '../../static/defaultAvatar1.jpeg' : '../../static/defaultAvatar2.jpeg'" alt="" class="commentAvatar">
            <div class="middleItem">
              <a href="">{{item.name}}</a>
              <div class="content">{{item.content}}</div>
              <span class="commentReplyTime">发表于 {{item.createTime}}</span>
            </div>
            <div class="rankBox"><span>{{index+1}}#</span></div>
            <div class="praiseAndReply">
              <span>赞{{praise}}</span>
              <span>回复{{reply}}</span>
            </div>
          </div>
        </div>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="margin: 10px 0;">
        </el-pagination>
        <!--编写评论-->
        <div class="editComment" id="editReply">
          <el-input type="textarea" placeholder="请输入你的回帖~" v-model="replyContent"></el-input>
          <div class="inputFooter">
            <el-button @click="submitComment" style="margin: 10px 0;">回帖</el-button>
          </div>
        </div>
      </div>
      <!--右侧区域-->
      <div class="rightContent">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>内容总分</span>
          </div>
          <div class="totalRate">{{totalRate}}</div>
          <div style="display: flex;"><span>5星</span><el-progress style="flex:1" :percentage="isNaN((rateMap[5]/totalRated)*100) ? 0 : (rateMap[5]/totalRated)*100"></el-progress></div>
          <div style="display: flex;"><span>4星</span><el-progress style="flex:1" :percentage="isNaN((rateMap[4]/totalRated)*100) ? 0 : (rateMap[4]/totalRated)*100"></el-progress></div>
          <div style="display: flex;"><span>3星</span><el-progress style="flex:1" :percentage="isNaN((rateMap[3]/totalRated)*100) ? 0 : (rateMap[3]/totalRated)*100"></el-progress></div>
          <div style="display: flex;"><span>2星</span><el-progress style="flex:1" :percentage="isNaN((rateMap[2]/totalRated)*100) ? 0 : (rateMap[2]/totalRated)*100"></el-progress></div>
          <div style="display: flex;"><span>1星</span><el-progress style="flex:1" :percentage="isNaN((rateMap[1]/totalRated)*100) ? 0 : (rateMap[1]/totalRated)*100"></el-progress></div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>留下你自己的评分</span>
          </div>
          <el-rate v-model="rate" show-text @change="rateChange"></el-rate>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="选择文件夹"
      :visible.sync="visible"
      width="30%">
      <span>请选择你的收藏夹</span>
      <el-select v-model="selectedFolderId">
        <el-option
          v-for="item in folders"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="confirmCollect">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import formatTime from '../utils/formatTime'
export default {
  data () {
    return {
      rate: 0,
      folders: [],
      showFixedTitle: false,
      passageContent: '<p>sdssds</p>',
      title: '',
      avatarUrl: '',
      userName: '',
      pass: 0,
      praise: 0,
      reply: 0,
      updateTime: '',
      commentList: [],
      replyContent: '',
      isPraise: false,
      userId: '',
      page: 1,
      size: 10,
      total: 0,
      isCollect: false,
      visible: false,
      selectedFolderId: '',
      totalRate: 0,
      rateMap: {},
      sex: ''
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scrollTop)
  },
  watch: {
    visible (value) {
      if (value === true) {
        this.getColletionFolderList()
      }
    }
  },
  methods: {
    async getRate () {
      const {data: res} = await this.$http.get(`/moment/rate/${this.$route.params.momentId}`)
      this.rate = res.data ? res.data.rate : 0
      this.totalRate = res.total
      this.rateMap = res.rateMap
      this.totalRated = res.totalRated
    },
    async rateChange (rate) {
      await this.$http.post(`/moment/rate/${this.$route.params.momentId}/${rate}`)
      this.getRate()
    },
    async confirmCollect () {
      if (!this.isCollect) {
        const res = await this.$http.post(`moment/collections/${this.$route.params.momentId}/${this.selectedFolderId}`)
        if (res.data === '收藏成功~') {
          this.isCollect = true
          this.visible = false
        }
      }
    },
    async getColletionFolderList () {
      const res = await this.$http.get('/moment/collectionFolderList')
      this.folders = res.data
    },
    toChat () {
      this.$router.push({path: '/chat', query: {id: this.userId, name: this.userName}})
    },
    async collect () {
      if (!this.isCollect) {
        this.visible = true
      } else {
        const res = await this.$http.post(`moment/collections/${this.$route.params.momentId}/0`)
        if (res.data === '取消收藏成功~') {
          this.isCollect = false
        }
      }
    },
    handleCurrentChange (page) {
      this.page = page
      this.getCommentData()
    },
    handleSizeChange (size) {
      this.size = size
      this.getCommentData()
    },
    async praiseClick () {
      const {data: res} = await this.$http.post(`/moment/praise/${this.$route.params.momentId}`, {userId: this.userId})
      if (res.status === 1) {
        this.isPraise = true
      }
      this.getDetailData()
    },
    scrollTop () {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop
      if (this.scroll > 60) {
        this.showFixedTitle = true
      } else {
        this.showFixedTitle = false
      }
    },
    async getDetailData () {
      const momentId = this.$route.params.momentId
      const res = await this.$http.get(`/moment/singleMoment/${momentId}`)
      this.passageContent = res.data.content
      this.title = res.data.title
      this.avatarUrl = res.data.author.avatarUrl
      this.userId = res.data.author.id
      this.userName = res.data.author.name
      this.praise = res.data.praise
      this.sex = res.data.author.sex
      this.pass = res.data.pass
      this.reply = res.data.reply
      this.updateTime = formatTime(res.data.updateTime, 'YYYY-MM-DD HH:mm')
      this.isPraise = res.data.isPraise
      console.log(res, 'oooo')
    },
    async getCommentData () {
      const momentId = this.$route.params.momentId
      const {data: res} = await this.$http.get(`/comment?momentId=${momentId}`, {params: {offset: this.page, size: this.size}})
      this.commentList = res.data
      this.total = res.total
      this.commentList.forEach(item => {
        item.createTime = formatTime(item.createTime, 'YYYY-MM-DD HH:mm:ss')
      })
    },
    async submitComment () {
      const momentId = this.$route.params.momentId
      const userId = this.userId
      await this.$http.post('/comment', {momentId, userId, content: this.replyContent})
      this.getCommentData()
      this.$message.success('回复成功！')
      this.getCommentData()
    },
    async queryCollect () {
      const {data: res} = await this.$http.get(`/moment/queryCollect/${this.$route.params.momentId}`)
      if (res.length > 0) {
        this.isCollect = true
      }
    }
  },
  created () {
    this.getDetailData()
    this.getCommentData()
    this.queryCollect()
    this.getRate()
  }
}
</script>

<style scoped lang="less">
  .title {
    font-size: 20px;
  }
  .totalRate {
    height: 48px;
    font-size: 32px;
    line-height: 48px;
    color: #222226;
  }
  .el-card {
    margin-bottom: 10px;
  }
  .toolBar {
    background-color: #f7f8f9;
    padding-right: 5px;
    padding-top: 30px;
    .item {
      cursor: pointer;
      width: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      padding: 5px;
      margin: 20px 0;
    }
  }
  .detailContainer{
    padding: 0 200px;
    background-color: #f7f8f9;
    padding-top: 10px;
    box-sizing: border-box;
  }
  .contentBox{
    margin-top: 10px;
    display: flex;
  }
  .leftContent{
    width: 700px;
    min-width: 700px;
    background-color: #f7f8f9;
  }
  .head{
    border-bottom: 1px solid #888;
    padding: 10px;
    padding-bottom: 0;
  }
  .rightContent{
    margin-left: 10px;
    min-width: 270px;
  }
  .passageInfo{
    display: flex;
    margin: 10px 0;
  }
  .passageInfo img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .detailTime{
    color: #999;
    font-size: 12px;
  }
  .timeInfo{
    display: flex;
    flex-direction: column;
    margin: 0 10px;
  }
  .columnLine{
    margin: 0 5px;
  }
  .headFooter{
    margin-left:auto;
    margin-right: 10px;
    margin-bottom: 0;
    margin-top: auto;
  }
  .detailTime{
    margin-top: 10px;
  }
  .fixTitle{
    position: sticky;
    display: flex;
    background-color: #fff;
    height: 50px;
    top: 59px;
    z-index: 999;
    padding: 10px;
    align-items: center;
  }
  .fixTitleRight{
    margin-left: auto;
    margin-right: 10px;
  }
  .passageContent{
    padding:  20px;
    background-color: #fff;
    border-bottom: 1px solid #888;
    overflow: scroll;
  }
  .passageFooter{
    background-color: #fff;
    padding: 20px;
    margin-bottom: 10px;
  }
  .commentHead{
    background-color: #fff;
    display: flex;
    height: 40px;
    align-items: center;
    padding: 10px;
  }
  .comment{
    padding: 0 10px;
    background-color: #fff;
  }
  .commentHead .el-button{
    margin-left: auto;
    margin-right: 10px;
  }
  .commentItem{
    position: relative;
    background-color: #fff;
    display: flex;
    padding:10px 0;
  }
  .itemBorder{
    border-bottom: 1px solid #888;
  }
  .commentItem .middleItem{
    min-height: 100px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    margin: 0 10px;
  }
  .commentAvatar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .rightItem{
    display: flex;
    flex-direction: column;
  }
  .rankBox{
    position: absolute;
    right: 20px;
    top: 10px;
    background-color: #dcdadc;
    color:#fff;
    width: 30px;
    text-align: center;
  }
  .content{
    word-break: break-all;
    margin: 5px 0;
  }
  .praiseAndReply{
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .editComment{
    margin: 10px 0;
    padding: 10px;
    background-color: #fff;
  }
  .commentReplyTime{
    color: #bbb;
    font-size: 12px;
  }
  .buttonClicked{
    background-color: #6a9af1;
    color: white;
  }
</style>
